<template>
	<div class="LikeToggle" :style={height:circleSize,width:circleSize}>
		<div class="main" @click="onLike" :class="{ likeActive: likeColor === 'red' }">
			<div class="disc1" :style="{ backgroundColor: likeColor, border: border, height: sizes, width: sizes, left: leftoffset }"></div>
			<div class="disc2" :style="{ backgroundColor: likeColor, border: border, height: sizes, width: sizes, top: bottomoffset }"></div>
			<div class="square" :style="{ backgroundColor: likeColor, border: border, height: sizes, width: sizes }"></div>
		</div>
		<div class="outCircle" :style="{ backgroundColor: outCircleBgColor_com,height:circleSize,width:circleSize }">
			<div class="innerCircle" :class="{ innerCircleActive: likeColor === 'red' }" :style="{backgroundColor:CurrentTheme.backgroundColor}"/>
		</div>
	</div>
</template>

<script>
let timers = null;
export default {
	props: {
		iSlike: {
			type: Boolean,
			default() {
				return false;
			}
		},
		_id:{
			type: String,
			default:""
		},
		// 爱心的大小
		size: {
			type: String,
			default: '16'
		},
		// 圆圈波纹的大小
	},
	watch: {
		iSlike: {
			handler(newQuestion, oldQuestion) {
				this.init();
			},
			immediate: true
		}
	},
	data() {
		return {
			leftoffset:'0',		// 第一块的偏移量
			bottomoffset:'0',		// 第二块的偏移量
			circleSize:"0"	,			// 圆圈波纹的大小

			likeColor: 'gray',					// 爱心背景颜色
			border: '1px solid gray',			// 三个div和成爱心的边框

			outCircleBgColor: '#fff',			// 外圈的波纹的颜色
			CurrenState: this.iSlike					// 当前的点击状态
		};
	},
	mounted() {
		this.init();
	},
	computed:{
		sizes(){
			return this.size + 'rpx'
		},
		// 初始化
		outCircleBgColor_com(){
			return this.likeColor === 'red' ? '#ffb3b3' : this.CurrentTheme.backgroundColor;
		}
	},
	methods: {
		init() {
			this.leftoffset = -(this.size/2 + 4 )+ 'rpx'
			this.bottomoffset = -(this.size/2 + 4)+ 'rpx'
			this.circleSize = (this.size*5)+ 'rpx'

			this.likeColor = this.iSlike ? 'red' : 'gray';
			this.border = this.iSlike ? '1px solid red' : '1px solid gray';
		},
		onLike() {
			if (timers) {
				this.$pub.Toast('请不要频繁点赞');
				this.$emit('change','请不要频繁点赞');
				return;
			}
			timers = setTimeout(() => {
				timers = null;
			}, 800);
			this.CurrenState = this.likeColor === 'red' ? false : true;
			this.likeColor = this.likeColor === 'red' ? 'gray' : 'red';
			this.border = this.likeColor === 'gray' ? '1px solid gray' : '1px solid red';
			this.outCircleBgColor = this.likeColor === 'red' ? '#ffb3b3' : this.CurrentTheme.backgroundColor;
			
			this.$emit('change',this.CurrenState,this._id);
		}
	}
};
</script>
<style scoped>
.LikeToggle {
	display: flex;
	align-items: center;
	justify-content: center;
	/* background-color: skyblue; */
}
.main {
	transform: rotate(45deg) scale(1);
	position: relative;
	top: -14rpx;
}
.disc1 {
	position: absolute;
	border-radius: 100%;
}
.disc2 {
	position: absolute;
	border-radius: 100%;
}
.square {
	position: absolute;
	top: 0;
}
.outCircle {
	position: absolute;
	border-radius: 100%;
	z-index: -5;
	/* top: -73%; */
	/* transform: translate3d(-42%, 0%, 0); */
}
.innerCircle {
	position: absolute;
	left: 50%;
	top: 50%;
	transform: translate3d(-50%, -50%, 0);
	height: 1rpx;
	width: 1rpx;
	border-radius: 100%;
	transition: 0.3s ease-out;
	z-index: -4;
}
.likeActive {
	animation: scale-out-elastic 1.2s ease-out reverse both;
}
.innerCircleActive {
	width: 82rpx;
	height: 82rpx;
}

@keyframes scale-out-elastic {
	0% {
		transform: rotate(45deg) scale(1);
	}
	4% {
		transform: rotate(45deg) scale(1);
	}
	8% {
		transform: rotate(45deg) scale(1);
	}
	14% {
		transform: rotate(45deg) scale(1);
	}
	18% {
		transform: rotate(45deg) scale(1);
	}
	26% {
		transform: rotate(45deg) scale(1.01);
	}
	28% {
		transform: rotate(45deg) scale(1.01);
	}
	40% {
		transform: rotate(45deg) scale(0.98);
	}
	42% {
		transform: rotate(45deg) scale(0.98);
	}
	56% {
		transform: rotate(45deg) scale(1.05);
	}
	58% {
		transform: rotate(45deg) scale(1.04);
	}
	72% {
		transform: rotate(45deg) scale(0.87);
	}
	86% {
		transform: rotate(45deg) scale(1.37);
	}
	100% {
		transform: rotate(45deg) scale(0);
	}
}
</style>
